<template>
  <ul 
    class="cell-group"
    :class="{
      'border-top': borderTop,
      'border-bottom': borderBottom
    }">
      <slot></slot>
  </ul>
</template>

<script>
export default {
  name: 'cell-group',
  props: {
    /**
     * 是否显示上边框
     */
    borderTop: {
      type: Boolean,
      default: true
    },
    /**
     * 是否显示下边框
     */
    borderBottom: {
      type: Boolean,
      default: true
    }
  }
};
</script>


<style lang="scss" scope>
  @import '../assets/style/config';
  @import '../assets/style/mixins/common';
  .cell-group{
    .cell{
      border-bottom: .06rem solid $border-color-split;
      &::before{
        content: " ";
        position: absolute;
        display: block;
        width: 1.4rem;
        height: .06rem;
        background: $write-color;
        left: 0;
        bottom: -.06rem;
      }
      &.image::before{
        width: 6rem;
      }
      &:last-of-type{
        &::before{
          background: none;
        }
        border-bottom: none;
      }
    }
  }
</style>
